import { App, Badge, Button, Descriptions, Select, Space, Table, Tooltip, } from "antd";
import { useEffect, useState } from "react";
import { overview_api } from "../api/overviews";
import { project_api } from "../api/projects";
import { downloadFile, excelJsExport, userExcelHeader } from "../api/excels";
import { provider_api } from "../api/providers";
import { ExclamationCircleOutlined } from "@ant-design/icons";

export function ProjectOverview() {
    const [overviewProjectPage, setOverviewProjectPage] = useState({ total: 0, content: [] })
    const { message, modal } = App.useApp();
    const [allProjects, setAllProjects] = useState([]);
    const [projects, setProjects] = useState([]);
    const [selectedProject, setSelectedProject] = useState(0);
    const columns = [
        {
            title: '合同编号',
            dataIndex: 'contract_no',
            key: 'contract_no',
        },
        {
            title: '类别',
            dataIndex: 'category_list',
            key: 'category_list',
        },
        {
            title: '供应商',
            key: 'provider_name',
            dataIndex: 'provider_name',
        },
        {
            title: '合同金额',
            key: 'contract_amount_total',
            render: (_, row) => (<>
                {row.contract_amount_total ? `${row.contract_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                <Tooltip title="对账金额超过合同金额5%">
                    <Badge count={
                        row.contract_amount_total < row.verify_amount_total * 0.95 ? (
                            <ExclamationCircleOutlined
                                style={{
                                    color: '#f5222d',
                                }}
                            />
                        ) : (
                            0
                        )} />
                </Tooltip>
            </>)
        },
        {
            title: '材料款',
            key: 'material_amount_total',
            render: (_, row) => (<>
                {row.material_amount_total ? `${row.material_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
        {
            title: '对账金额',
            key: 'verify_amount_total',
            render: (_, row) => (<>
                {row.verify_amount_total ? `${row.verify_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
        {
            title: '合计开票',
            key: 'invoice_amount_total',
            render: (_, row) => (<>
                {row.invoice_amount_total ? `${row.invoice_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
        {
            title: '欠款',
            key: 'defaulters_amount_total',
            render: (_, row) => (<>
                {row.defaulters_amount_total ? `${row.defaulters_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
        {
            title: '挂票',
            key: 'invoice_hang_amount_total',
            render: (_, row) => (<>
                {row.invoice_hang_amount_total ? `${row.invoice_hang_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
    ];
    const reFreshOverviewProject = (project_id) => {
        const pid = !project_id ? selectedProject : project_id;
        overview_api.project(pid).then(data => {
            setOverviewProjectPage(data)
        }).catch(e => message.error(e))
    }

    useEffect(() => {
        project_api.pageProject({ keyword: '', page: 1, size: -1 }).then(projects => {
            setAllProjects(projects.content.map(it => ({ label: it.name, value: it.id })))
            setProjects(projects.content.map(it => ({ label: it.name, value: it.id })))
            if (projects.content.length > 0) {
                setSelectedProject(projects.content[0].id)
                reFreshOverviewProject(projects.content[0].id)
            }

        }).catch(e => message.error(e));
    }, []);
    return <>
        <Space style={{ margin: '10px' }}>
            <Select size="large" style={{ width: '15vw' }} value={selectedProject}
                showSearch placeholder="选择项目"
                title="选择项目" filterOption={
                    (input, option) => {
                        return (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                } options={[...projects]}
                onChange={(value) => {
                    setSelectedProject(value)
                    reFreshOverviewProject(value)
                }}></Select>
            <Button type="primary" size="large" onClick={() => {
                excelJsExport({
                    sheetName: 'Sheet1',
                    headerColumns: columns,
                    tableData: overviewProjectPage.content
                }).then((buf) => downloadFile(buf, `${projects.find(it => it.value === selectedProject).label}_汇总.xlsx`))
            }}>导出</Button>
        </Space>
        <Table size="small" pagination={false} dataSource={overviewProjectPage.content} columns={columns} />
        <Descriptions title="汇总" column={5} items={[
            {
                key: 1,
                label: '合同总额',
                span: 1,
                children: <>
                    {overviewProjectPage.all_contract_amount_total ? `${overviewProjectPage.all_contract_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            },
            {
                key: 2,
                label: '对账总额', span: 1,
                children: <>
                    {overviewProjectPage.all_verify_amount_total ? `${overviewProjectPage.all_verify_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            },

            {
                key: 3,
                label: '累计欠款', span: 1,
                children: <>
                    {overviewProjectPage.all_defaulters_amount_total ? `${overviewProjectPage.all_defaulters_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            },
            {
                key: 4,
                label: '开票总额', span: 1,
                children: <>
                    {overviewProjectPage.all_invoice_amount_total ? `${overviewProjectPage.all_invoice_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            },
            {
                key: 5,
                label: '累计挂票', span: 1,
                children: <>
                    {overviewProjectPage.all_invoice_hang_amount_total ? `${overviewProjectPage.all_invoice_hang_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            }
        ]} />
    </>
}

export function ProviderOverview() {
    const [overviewProviderPage, setOverviewProvidersPage] = useState({ total: 0, content: [] })
    const { message, modal } = App.useApp();
    const [allProviders, setAllProviders] = useState([]);
    const [providers, setProviders] = useState([]);
    const [selectedProvider, setSelectedProvider] = useState(null);
    const columns = [
        {
            title: '项目',
            dataIndex: 'project_name',
            key: 'project_name',
        },
        {
            title: '供应商',
            dataIndex: 'provider_name',
            key: 'provider_name',
        },
        {
            title: '合同编号',
            dataIndex: 'contract_no',
            key: 'contract_no',
        },
        {
            title: '类别',
            dataIndex: 'category_list',
            key: 'category_list',
        },
        {
            title: '合同金额',
            key: 'contract_amount_total',
            render: (_, row) => (<>
                {row.contract_amount_total ? `${row.contract_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
        {
            title: '材料款',
            key: 'material_amount_total',
            render: (_, row) => (<>
                {row.material_amount_total ? `${row.material_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
        {
            title: '对账金额',
            key: 'verify_amount_total',
            render: (_, row) => (<>
                {row.verify_amount_total ? `${row.verify_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
        {
            title: '开票金额',
            key: 'invoice_amount_total',
            render: (_, row) => (<>
                {row.invoice_amount_total ? `${row.invoice_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
        {
            title: '欠款',
            key: 'defaulters_amount_total',
            render: (_, row) => (<>
                {row.defaulters_amount_total ? `${row.defaulters_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
        {
            title: '挂票',
            key: 'invoice_hang_amount_total',
            render: (_, row) => (<>
                {row.invoice_hang_amount_total ? `${row.invoice_hang_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
            </>)
        },
    ];
    const reFreshOverviewProvider = (ur) => {
        const provider_id = !!ur ? ur : selectedProvider;
        overview_api.provider(provider_id).then(data => {
            setOverviewProvidersPage(data)
        }).catch(e => message.error(e))
    }

    useEffect(() => {
        provider_api.pageProvider({ keyword: '', page: 1, size: -1 }).then(providers => {
            setAllProviders([{ label: "所有供应商", value: -1 }, ...providers.content.map(it => ({ label: it.name, value: it.id }))])
            setProviders([{ label: "所有供应商", value: -1 }, ...providers.content.map(it => ({ label: it.name, value: it.id }))])
            setSelectedProvider(-1)
            reFreshOverviewProvider(-1)

        }).catch(e => message.error(e));
    }, []);
    return <>
        <Space style={{ margin: '10px' }}>
            <Select size="large" style={{ width: '15vw' }} value={selectedProvider}
                showSearch placeholder="选择供应商"
                title="选择供应商" filterOption={
                    (input, option) => {
                        return (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                } options={[...providers]}
                onChange={(value) => {
                    setSelectedProvider(value)
                    reFreshOverviewProvider(value)
                }}></Select>
            <Button type="primary" size="large" onClick={() => {
                excelJsExport({
                    sheetName: 'Sheet1',
                    headerColumns: columns,
                    tableData: overviewProviderPage.content
                }).then((buf) => downloadFile(buf, `${providers.find(it => it.value === selectedProvider).label}_汇总.xlsx`))
            }}>导出</Button>
        </Space>
        <Table size="small" pagination={false} dataSource={overviewProviderPage.content} columns={columns} />
        <Descriptions title="汇总" column={5} items={[
            {
                key: 1,
                label: '合同总额',
                span: 1,
                children: <>
                    {overviewProviderPage.all_contract_amount_total ? `${overviewProviderPage.all_contract_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            },
            {
                key: 2,
                label: '对账总额', span: 1,
                children: <>
                    {overviewProviderPage.all_verify_amount_total ? `${overviewProviderPage.all_verify_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            },

            {
                key: 3,
                label: '累计欠款', span: 1,
                children: <>
                    {overviewProviderPage.all_defaulters_amount_total ? `${overviewProviderPage.all_defaulters_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            },
            {
                key: 4,
                label: '开票总额', span: 1,
                children: <>
                    {overviewProviderPage.all_invoice_amount_total ? `${overviewProviderPage.all_invoice_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            },
            {
                key: 5,
                label: '累计挂票', span: 1,
                children: <>
                    {overviewProviderPage.all_invoice_hang_amount_total ? `${overviewProviderPage.all_invoice_hang_amount_total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0'}
                </>
            }
        ]} />
    </>
}

